import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import MdEasyCom from ".././MdCom/EasyCom";
import OnePer from "../MdCom/OnePer";
import { Button, Card } from "antd";
type ArticleInfo = {
  title: string;
  content: string;
};
const ReduxComTwo: React.FC<ArticleInfo> = ({ title, content }) => {
  const [article, setArticle] = useState<ArticleInfo>({ title, content });
  const dispatch = useDispatch();
  useEffect(() => { }, []);
  const arrElse = [
    {
      id: 1,
      txt: "盖章介绍redux-saga中的Effect创建器的具体使用方法和知识点",
      needDivder: false,
    },
    {
      id: 2,
      txt: "该页面主要展示redux+redux-saga的具体用法，配置方式见真的md文件",
      needDivder: true,
      divderTxt: "let's go =====",
    },
  ];
  const arrAnElse = [
    {
      id: 1,
      txt:
        "下面涵盖介绍了一些hook和ts的用法和传值赋值--声明了OnePer组件接受参数，",
      needDivder: false,
    },
    {
      id: 2,
      txt:
        "并且本身ReduxComTwo在父级页面也是需要接受传值的，在那个下一篇新闻方法中有体现。",
      needDivder: false,
    },
  ];
  return (
    <div>
      <MdEasyCom arr={arrElse}></MdEasyCom>

      <Card
        title="redux-saga-Effect 创建器"
        style={{ width: 600, margin: "20px 0" }}
      >
        <div>
          <span>takeEvery：</span>
          <Button
            type="default"
            onClick={() => dispatch({ type: "take" })}
            style={{ marginRight: "20px" }}
          >
            初始化
          </Button>
        </div>
      </Card>
      <MdEasyCom arr={arrAnElse}></MdEasyCom>
      <Card title="hook+ts扩展" style={{ width: 600, margin: "20px 0" }}>
        <div>
          <OnePer name="vortesnail" age={25} />
          <div>
            <p>Title: {article.title}</p>
            <section>{article.content}</section>
            <Button
              type="default"
              onClick={() =>
                setArticle({
                  title: "今日**基金连续上涨多少个百分点",
                  content: "该基金的巴拉巴拉等等内容",
                })
              }
            >
              下一篇新闻
            </Button>
            <Button
              type="default"
              onClick={() =>
                setArticle({
                  title: "今日**该基金的巴拉巴拉等等内容",
                  content: "连续上涨多少个百分点",
                })
              }
            >
              再下一篇新闻
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default ReduxComTwo;
